<template>
  <div class="container">
    <Breadcrumb :items="['menu.audit', '发起流程']" />
    <a-card class="general-card">
      <a-spin :loading="loading" style="width: 100%;">
        <a-tabs type="rounded" size="medium">
          <a-tab-pane v-for="(item) in processGroup" :key="item.processGroupId" :title="item.processGroupName">
            <template v-if="!item.processes || item.processes.length <=0">
              <a-empty />
            </template>
            <template v-else>
              <a-row :gutter="[24, 12]" style="margin-top: 20px;">
                <a-col v-for="(process, index) in item.processes" :key="index" :span="6">
                  <a-card
                    class="card-group"
                    :hoverable="true"
                    :title="process.processName"
                  >
                    <template #extra>
                      <a-link @click.stop="startProcess(process)">
                        发起流程
                      </a-link>
                    </template>
                    <span style="font-size: 12px;">
                      <a-tag v-if="process.status=== '0'">未部署</a-tag>
                      <a-tag v-if="process.status=== '1'" color="cyan">已部署</a-tag>
                      <a-tag v-if="process.status=== '2'" color="arcoblue">测试中</a-tag>
                      <a-tag v-if="process.status=== '3'" color="green">以上线</a-tag>
                      <a-tag v-if="process.status=== '4'" color="#86909c">以下线</a-tag>
                    </span>
                  </a-card>
                </a-col>
              </a-row>
            </template>
          </a-tab-pane>
        </a-tabs>
      </a-spin>
    </a-card>

    <dialog-start ref="dialogStartRef" @submit="fetchData" />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { FlowProcessGroup } from '@/api/flow/process-group';
import { processGroupList, FlowProcess } from '@/api/flow/process';
import useLoading from '@/hooks/loading';
import DialogStart from '@/views/flow/common/dialog-start.vue';

const { loading, setLoading } = useLoading(false);

const processGroup = ref<FlowProcessGroup[]>();

const dialogStartRef = ref();

const startProcess = (process: FlowProcess) => {
  dialogStartRef.value.open(process);
};

const fetchData = () => {
  setLoading(true);
  processGroupList().then(res => {
    processGroup.value = res.data;
  }).finally(() => {
    setLoading(false);
  });
};

onMounted(() => {
  fetchData();
});
</script>

<script lang="ts">
export default {
  name: 'ProcessStart'
};
</script>

<style scoped lang="less">
@import "/src/components/table/common";

.card-group {
  transition-property: all;
}

.card-group:hover {
  transform: translateY(-4px);
}
</style>